<template>
  <div class="fixed top-0 left-0 w-screen h-screen text-xl bg-slate-200 z-20">
    <m-navbar v-if="isMobileTerminal"></m-navbar>
    <m-svg-icon
      v-else
      name="close"
      class="w-3 h-3 ml-1 p-0.5 cursor-pointer duration-200 rounded-sm hover:bg-zinc-100 absolute right-2 top-2"
      fillClass="fill-zinc-400"
      @click="onPop"
    ></m-svg-icon>
  </div>
</template>

<script setup>
import { isMobileTerminal } from '@/utils/flexible'
import { useRouter } from 'vue-router'
import { ref } from 'vue'

const router = useRouter()

const cities = ref([
  { name: 'New York', code: 'NY' },
  { name: 'Rome', code: 'RM' },
  { name: 'London', code: 'LDN' },
  { name: 'Istanbul', code: 'IST' },
  { name: 'Paris', code: 'PRS' }
])

defineProps({
  id: {
    type: String,
    required: true
  }
})

const onPop = async (el) => {}
</script>
